<!-- App开发 -->
<template>
    <div class="app">
        <div class="banner">
            <img :src="banner.length > 0 ? $staticPath + banner[0].productImageAddress : ''" alt="">

            <div class="applet-descript">
                <div class="applet-content">
                    <div class="applet-content-title">{{ bannerDesc.length > 0 ? bannerDesc[0].productTitle : 'APP开发服务' }}</div>
                    <div v-html="bannerDesc.length > 0 ? bannerDesc[0].productDescribe : '采用当下流行的webapp开发，可定制开发原生与框架型移动APP，覆盖iPhone、iPad、Android等终端设备，为企业提供app的策划、研发、推广、运营、售后等一系列服务。' " class="descript"></div>

                    <div class="advantage">
                        <div v-for="item in bannerAdvantageList" :key="item.id" class="advantage-item">
                            <div class="img-box">
                                <img :src="$staticPath + item.productImageAddress" alt="">
                            </div>
                            <div class="desc">{{ item.productTitle }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="preponderance">
            <div class="bx">
                <div class="preponderance-list">
                    <div v-for="item in advantageList" :key="item.id" class="preponderance-item">
                        <img :src="$staticPath + item.productImageAddress" alt="">
                        <div class="title">{{ item.productTitle }}</div>
                        <div v-html="item.productDescribe" class="desc"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="dedicated-application">
            <div class="bx">
                <div class="base-info">
                    <div class="title">{{ belongToYouTitleDesc.length > 0 ? belongToYouTitleDesc[0].productTitle : '' }}</div>
                    <div class="desc">{{ belongToYouTitleDesc.length > 0 ? belongToYouTitleDesc[0].productShortTitle : '灵活的产品架构，您即可使用平台上的工具和系统快速运维，也可自建运维工具和系统' }}</div>
                </div>

                <div class="dedicated-application-content">
                    <div class="dedicated-application-left">
                        <div class="img-box">
                            <img :src="belongToYouAppImage.length > 0 ? $staticPath + belongToYouAppImage[0].productImageAddress : ''" alt="">
                        </div>
                    </div>
                    <div class="dedicated-application-right">
                        <div class="development-mode-list">
                            <div v-for="item in belongToYouList" :key="item.id" class="development-mode-item">
                                <div class="title">{{ item.productTitle }}</div>
                                <div v-html="item.productDescribe" class="desc"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="application-development">
            <div class="bx">
                <div class="title">{{ appTitleDesc.length > 0 ? appTitleDesc[0].productTitle : 'APP应用开发' }}</div>
                <div v-html="appTitleDesc.length > 0 ? appTitleDesc[0].productDescribe : ''" class="desc"></div>

                <div class="tags">
                    <div v-for="item in appClassifyList" :key="item.id" class="tag">{{ item.productTitle }}</div>
                </div>

                <div class="application-development-content">
                    <div class="application-development-content-left">
                        <div class="img-box">
                            <img :src="appLeftTopImage.length > 0 ? $staticPath + appLeftTopImage[0].productImageAddress : ''" alt="">
                        </div>
                        <div class="status-quo-list">
                            <div v-html="appLeftDesc.length > 0 ? appLeftDesc[0].productDescribe : ''" class="status-quo-item">
                            </div>
                        </div>
                    </div>
                    <div class="application-development-content-right">
                        <div class="ar-title">{{ appRightTitleDesc.length > 0 ? appRightTitleDesc[0].productTitle : '' }}</div>
                        <div v-html="appRightTitleDesc.length > 0 ? appRightTitleDesc[0].productDescribe : ''" class="ar-desc"></div>

                        <div class="flow">
                            <div class="flow-left">
                                <div class="flow-title">开发流程</div>
                                <div class="flow-list" v-html="appProcess.length > 0 ? appProcess[0].productDescribe : ''">
                                </div>
                            </div>
                            <div class="flow-right">
                                <img src="@/assets/image/app/12.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            banner : [], //banner图
            bannerDesc : [],        //banner图上的介绍
            bannerAdvantageList : [],   //轮播图上的优势列表
            advantageList : [],   //优势列表
            belongToYouTitleDesc : [],  //属于你的APP应用-标题+描述
            belongToYouAppImage : [],   //属于你的APP应用-左边图片
            belongToYouList : [],   //属于你的APP应用-右边列表
            belongToYouList : [],   //属于你的APP应用-右边列表
            appTitleDesc : [],  //APP应用开发-标题+描述
            appClassifyList : [],  //APP应用开发-开发分类列表
            appLeftTopImage : [],  //APP应用开发-左上图片
            appLeftDesc : [],  //APP应用开发-左上图片
            appRightTitleDesc : [],  //APP应用开发-右边标题+描述
            appProcess : [],  //APP应用开发-右边开发流程
            classIdList: ['1834391233159221250','1834392266887385090','1834392367819116546','1834392655783251969','1834392781306187778',
                '1834392965222223874','1834393054128885761','1834393250153877506','1834393408484659202','1834393700907339778','1834393854318202882',
                '1834393972647907329','1834394053027549186'
            ],    //分类id列表
        }
    },
    created(){
        this.getData()
    },
    methods: {
        //查询配置
        queryProgram(classificationId, index) {
            let dateNameList = ['banner','bannerDesc','bannerAdvantageList','advantageList','belongToYouTitleDesc',
                'belongToYouAppImage','belongToYouList','appTitleDesc','appClassifyList','appLeftTopImage','appLeftDesc','appRightTitleDesc',
                'appProcess'
            ]
            this.request('queryProgram', {}, {
                pageNo: 1,
                pageSize: 1000,
                classificationId
            }).then(res => {
                this[dateNameList[index]] = res
            })
        },

        //获取数据
        getData() {
            this.classIdList.forEach((item, index) => {
                this.queryProgram(item, index)
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.app {
    .banner {
        position: relative;

        img {
            width: 100%;
        }

        .applet-descript {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1000;
            height: 100%;
            box-sizing: border-box;
            padding-left: 8vw;

            .applet-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .applet-content-title {
                    font-size: 2vw;
                    color: white;
                }

                .descript {
                    font-size: 1vw;
                    color: white;
                    margin: 2vw 0;
                    width: 50%;
                }

                .advantage {
                    display: flex;

                    .advantage-item {
                        margin-left: 1vw;
                        text-align: center;
                        font-size: .8vw;
                        color: white;

                        .img-box {
                            border: 1px solid #80B4AF;
                            padding: .3vw;
                            margin-bottom: .3vw;

                            img {
                                width: 2.5vw;
                                height: 2.5vw;
                            }
                        }
                    }
                }
            }
        }
    }

    .preponderance {
        padding: 2vw 0;

        .preponderance-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 2vw;
            width: 80%;
            margin: 0 auto;

            .preponderance-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: calc(95% / 4);
                margin-right: calc(5% / 3);

                img {
                    display: block;
                    width: 40%;
                }

                .title {
                    color: #3E3C3A;
                    font-size: 1vw;
                    margin: 1vw 0;
                }

                .desc {
                    color: #777;
                    font-size: 11px;
                    text-align: center;
                }

                &:nth-child(4n) {
                    margin: 0;
                }
            }
        }
    }

    .dedicated-application {
        background: #F5F5F5;
        padding: 2vw 0px;

        .bx {

            .base-info {
                .title {
                    font-weight: bold;
                    font-size: 1.3vw;
                }

                .desc {
                    color: #69696B;
                    margin: 1vw 0;
                }
            }

            .dedicated-application-content {
                display: flex;
                flex-wrap: wrap;

                .dedicated-application-left {
                    width: 70%;

                    .img-box {
                        display: flex;
                        align-items: center;
                        height: 30vw;

                        img {
                            display: block;
                            width: 40%;
                        }
                    }
                }

                .dedicated-application-right {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    width: 30%;
                    background: #F1F1F1;

                    .development-mode-list {

                        .development-mode-item {
                            margin-bottom: 1vw;

                            .title {
                                color: #3E3E3E;
                                font-size: 1vw;
                            }

                            .desc {
                                color: #666;
                                font-size: .8vw;
                            }
                        }
                    }
                }
            }

        }
    }

    .application-development {
        padding: 2vw 0;

        .title,
        .desc {
            text-align: center;
        }

        .title {
            font-size: 22px;
            font-weight: bold;
        }

        .desc {
            font-size: 14px;
            color: #999999;
            margin: 10px 0;
        }

        .tags {
            display: flex;
            justify-content: center;
            margin: 20px 0;

            .tag {
                padding: 10px 20px;
                background: #F6F6F6;
                border-radius: 6px;
                color: #555555;
                margin: 0 5px;
                cursor: pointer;
            }
        }

        .application-development-content {
            display: flex;
            flex-wrap: wrap;

            .application-development-content-left {
                width: 60%;

                .img-box {
                    width: 80%;

                    img {
                        width: 100%;
                    }
                }

                .status-quo-list {
                    width: 80%;
                    margin-top: 30px;

                    .status-quo-item {
                        margin-bottom: 10px;

                        .quo-title {
                            font-size: 20px;
                            margin-bottom: 10px;
                            color: #333333;
                        }

                        .quo-desc {
                            color: #666666;
                            font-size: 14px;
                        }
                    }
                }
            }

            .application-development-content-right {
                width: 40%;
                border: 2px solid #A4A4A4;
                box-sizing: border-box;
                padding: 20px;

                .ar-title {
                    font-size: 22px;
                    font-weight: bold;
                    margin-bottom: 10px;
                }

                .ar-desc {
                    font-size: 14px;
                    color: #666666;
                }

                .flow {
                    display: flex;
                    margin-top: 20px;

                    .flow-left {
                        width: 50%;

                        .flow-title {
                            font-size: 20px;
                            color: #4C4C4C;
                        }

                        .flow-list {
                            color: #4c4c4c;

                            .flow-item {
                                margin: 10px 0;
                                font-size: 14px;
                            }
                        }
                    }

                    .flow-right {
                        display: flex;
                        align-items: center;
                        width: 50%;

                        img {
                            display: block;
                            width: 90%;
                        }
                    }
                }
            }
        }
    }
}
</style>